<template>
	<div class="top">
		<el-row>
			<el-col class="topBar" :span="18">
				<span  class="logo">
					<i class="iconfont icon-index" @click="goHome"></i>{{mainTitle}}</span>
				<span class="subtitle">{{separator}}{{subtitle}}</span>
			</el-col>
			<el-col :span="6" class="userInfo">
				<span>您好：</span>
				<el-dropdown trigger="click">
			      <span class="el-dropdown-link">
			        <span>{{curUser.userNickName}}{{curUser.userName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
			      </span>
			      <el-dropdown-menu slot="dropdown">
			        <el-dropdown-item><span @click="logOut">退出</span></el-dropdown-item>
			      </el-dropdown-menu>
			    </el-dropdown>
			</el-col>
		</el-row>
	</div>
</template>
<script type="text/javascript">
	export default{
		name: "CommonTop",
		props:["subtitle","mainTitle","separator"],
		data(){
			return {
				curUser:{}
			}
		},
		mounted(){
			if (this.$cookies.get("curUser")) {
				this.curUser = this.$cookies.get("curUser");
			}
		},
		methods:{
		    goHome:function(){
		    	this.$router.push({path:'/'});
		    },
		    logOut:function(){
		      this.$axios.logOut();
		      this.$cookies.remove("token");
			  this.$cookies.remove("curUser");
			  this.$router.push({path:'/login'});
		    },
		 },
	}
</script>
<style type="text/css" scoped>
	.top{
		background-color: #1e90ff;
		height: 70px;
	}
	.topBar{
		text-align: left;
		padding-left: 15px;
	}
	.logo{
		color: #ffffff;
		letter-spacing: 10px;
		font-size: 24pt;
		line-height: 70px;
	}
	.subtitle{
		color: #ffffff;
		letter-spacing: 5px;
		font-size: 14pt;
		font-weight: bolder;
	}
	.icon-index{
		font-size: 28pt;
		cursor: pointer;
	}
	.userInfo{
		text-align: right;
		padding-right: 15px;
		line-height: 35px;
	}
	.userInfo span{
		color: #ffffff;
		font-size: 16px;
		cursor: pointer;
	}
</style>